<template>
  <div class="recommend">
    <title-border>编辑推荐</title-border>
    <ul class="recommendList" v-if="recommendList.length > 0">
      <router-link
        tag="li"
        :to="`/songlist/${item.id}`"
        v-for="item in recommendList"
        :key="item.id"
        :currentmusic="currentmusic"
      >
        <!-- <img :src="item.picUrl" />
        <span>{{ item.playCount }}</span> -->
        <img-item :item="item"></img-item>
        <h6>
          {{ item.name }}
          <!-- {{ item.id }} -->
        </h6>
      </router-link>
    </ul>
    <load-animate v-else></load-animate>

    <title-border>最新音乐</title-border>
    <music-list
      v-if="newSong.length > 0"
      :musiclist="newSong"
      :currentmusic="currentmusic"
      @play="$emit('play', $event)"
    ></music-list>
    <load-animate v-else></load-animate>

    <title-border>热门MV</title-border>
    <title-border>推荐歌手</title-border>
    <ul class="recommendList" v-if="singers.length > 0">
      <router-link
        tag="li"
        :to="`/singer/${item.id}`"
        v-for="item in singers"
        :key="item.id"
      >
        <!-- <img :src="item.picUrl" />
        <span>{{ item.playCount }}</span> -->
        <img-item :item="item"></img-item>
        <h6>
          {{ item.name }}
          <!-- {{ item.id }} -->
        </h6>
      </router-link>
    </ul>

    <load-animate v-show="isloading"></load-animate>
    <div class="loadmore" @click.stop="loadMore" ref="loadmore">
      加载更多...
    </div>
  </div>
</template>

<script>
import TitleBorder from "@/components/TitleBorder";
import ImgItem from "@/components/ImgItem.vue";
import MusicList from "@/components/MusicList";
export default {
  props: {
    currentmusic: {
      type: Object,
      default: () => {
        return null;
      },
    },
  },
  data() {
    return {
      recommendList: [],
      newSong: [],
      singers: [],
      page: 1,
      isloading: true, //显示loading
    };
  },
  created() {
    this.getRecommendList();
    this.getNewSong();
    this.getHotSinger();
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    async getRecommendList() {
      await this.axios.get("/personalized").then((re) => {
        // console.log(re);
        // console.log(this);
        this.recommendList = re.result.slice(0, 9);
      });
    },
    async getNewSong() {
      await this.axios.get("/personalized/newsong").then((re) => {
        this.newSong = re.result;
        console.log("获取歌曲", this.newSong);
      });
    },
    async getHotSinger(offset = 12) {
      await this.axios
        .get(`/top/artists?offset=0&limit=${offset}`)
        .then((re) => {
          this.singers = re.artists;
          this.isloading = false;
          console.log("获取热门歌手", this.singers);
        });
    },
    loadMore() {
      this.isloading = true;
      this.page++;
      let offset = 12 * this.page;
      this.getHotSinger(offset);
    },
  },
  components: {
    TitleBorder,
    ImgItem,
    MusicList,
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  .recommendList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 2px;
    li {
      width: 33%;
      margin-bottom: 10px;
      h6 {
        overflow: hidden;
        padding: 6px 2px 0 6px;
        min-height: 30px;
        line-height: 1.2;
        font-size: 13px;
      }
    }
  }
  .loadmore {
    font-size: 12px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
  }
}
</style>